/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
	<view class="index_class">

		<view class="class_scoll">
			<scroll-view class="scroll-view_H scroll_left" scroll-with-animation="true" scroll-anchoring="true"
				scroll-y="true" scroll-left="0">
				<view class="scroll-view-item_H scroll_left_item " @click="clickActive(item.id, index)"
					:class="{'active': currIndex === index}" v-for="(item, index) in list" :key="index">
					<view>{{ item.cate_name }}</view>
				</view>
			</scroll-view>
			<scroll-view class="scroll-view_H scroll_right" scroll-y="true" scroll-with-animation="true"
				scroll-anchoring="true" scroll-right="0">
				<view class="scroll-view-item_H scroll_right_item">
					<u-swiper v-if="bannerList.length != 0" class="swiperBox" :list="bannerList" name="ad_pic"  @click="bannerClick" height="200" :border-radius="20"
						style="padding: 25rpx 0"></u-swiper>
					<view class="right_scoll_items" v-for="(item, index) in goodsList" :key="index">
						<view class="s_title">{{item.cate_name}}</view>
						<view class="right_scoll_items_img">
							<view @click="getnav('/pagesC/goods/categoryGoods?id=' + erth.id)" class="img_items"
								v-for="(erth,index2) in item.three" :key="index2">
								<image :src="erth.cate_pic" mode="aspectFit" />
								<view>{{ erth.cate_name }}</view>
							</view>
						</view>
					</view>
				</view>

			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					cate_name: this.$t('推荐分类'),
					id: 0
				}],
				currIndex: 0,
				goodsList: [],
				bannerList: [],
			}
		},

		onLoad() {
			this.getBannerList()
			this.getCategory()
		},

		methods: {
			getCategory() {
				this.$http.getCategory({}).then((res) => {
					if (res.status === 200) {
						const newList = this.list.concat(res.data.cateres)
						this.list = newList
						this.goodsList = [{
							three: res.data.recom_cate
						}]
						this.clickActive(newList[0].id, 0)
					} else {
						this.$toast(res.mess)
					}
				})
			},
			getBannerList(){
				const data = {
					tag: 'mobile_category_banner'
				}
				this.$http.getAdByTag(data).then(res => {
					if(res.status == 200){
						this.bannerList = res.data
					}
				})
			},
			bannerClick(index){
				let ad = this.bannerList[index];
				if(ad.ad_url != ''){
					this.$u.route({url:ad.ad_url,type:ad.ad_url_type})
				}
			},
			clickActive(id, index) {
				if (this.currIndex === index) return false
				this.currIndex = index
				this.$loading()
				this.$http.getCategoryList({
					cate_id: id
				}).then(res => {
					if (res.status === 200) {
						if (id === 0) {
							this.goodsList = [{
								three: res.data
							}]
							return false
						}
						this.goodsList = res.data

					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.icon_e64c {
		width: 120rpx;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		font-size: 80rpx;
		color: #CECDCD;
		flex-direction: column;
	}

	.active {
		width: 100% !important;

	}

	.active image {
		width: 378rpx !important;
		height: 378rpx !important;
	}

	.index_class,
	page {
		height: 100%;
	}

	.s_title {
		padding-left: 30rpx !important;
		padding-bottom: 0 !important;
	}

	.class_scoll {
		top: 20rpx !important;
		height: 100% !important;
	}

	.class_scoll {
		height: calc(100% - 100rpx);
		/*  #ifdef  APP-PLUS  */
		height: calc(100% - 100rpx - var(--status-bar-height));
		/*  #endif  */
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		display: flex;

		.scroll_left {
			width: 200rpx;
			background: #f8f8f8;

			// padding: 0 30rpx;
			.scroll_left_item {
				width: 200rpx;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				view {
					width: 200rpx;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					font-size: 28rpx;
					color: #555;
					border-left: 4rpx solid transparent;
					// border-radius: 28rpx;

				}

				&.active view {
					color: #ff4c15;
					font-weight: 600;
					font-size: 32rpx
				}

			}


		}

		.scroll_right {
			width: calc(100% - 240rpx);

			.scroll_right_item {

				.right_scoll_items {
					border-radius: 18rpx;
					background-color: #fff;
					margin-bottom: 16rpx;

					.s_title {
						font-size: 24rpx;
						padding: 20rpx 0;
						font-weight: 600
					}

					.right_scoll_items_img {
						display: flex;
						flex-wrap: wrap;
						padding: 30rpx;

						.img_items {
							width: 33.33%;
							text-align: center;
							margin-bottom: 30rpx;

							image {
								width: 86rpx;
								height: 86rpx;
								border-radius: 8rpx;
							}

							view {
								text-align: center;
								font-size: 24rpx
							}
						}
					}
				}

			}
		}
	}
</style>
